<style lang="less">
@import './common/less/varible.less';

.layout-footer{
    width:100%;
    position:fixed;
    bottom:0;
    left:0;
    border-top:1px solid white;
    font-family:"华文行楷";
    z-index:1000;
}
.layout-footer-box{
    display:flex;
    width:100%;
    height:60px;
    background-color:@bgColor;
    a{
        flex-shrink:0;
        flex-basis:25%;
        text-align:center;
        margin-top:5px;
        // display:flex;
        justify-content:center;
        align-items:center;
        p{
            font-size:16px;
        }
        &.active{
            color:@activeColor;
        }
    }
}
</style>

<template>
    <div class="layout">
       
        <!-- 路由组件出口(二级路由) -->
         <router-view></router-view>

         <!-- 导航栏 -->
         <div class="layout-footer">
            <div class="layout-footer-box">
                <router-link to="/index" active-class="active">
                    <van-icon name="newspaper-o" />
                    <p>书城</p>
                </router-link>
                <router-link to="/sort" active-class="active">
                    <van-icon name="apps-o" />
                    <p>分类</p>
                </router-link>
                <router-link to="/bookshelf" active-class="active">
                    <van-icon name="bar-chart-o" />
                    <p>书架</p>
                </router-link>
                <router-link to="/my" active-class="active">
                    <!-- <i></i> -->
                    <van-icon name="user-circle-o" />
                    <p>我的</p>
                </router-link>
            </div>
         </div>

    </div>
</template>

<script>

</script>